<template>
    <div class="nav">
        <div class="logo"></div>
        <div class="menu">
            <div v-for="(item, i) in menuList" class="menu-item"
                :class="{active: i === active}"
                :key="i">
                <i class="iconfont" :class="item.icon"></i>{{item.title}}
            </div>
        </div>
        <div class="sign-in">
            <span class="sign-item"><i class="iconfont icon-check"></i></span>
            <span class="sign-item hover"><i class="iconfont icon-user"></i>登录</span>
            <span class="sign-item hover">注册</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Nav',
    data() {
        this.menuList = [
            {icon: 'icon-home', title: '首页'},
            {icon: 'icon-vip', title: 'VIP'},
            {icon: 'icon-about', title: '关于'}
        ];
        return {
            active: 0
        };
    }
};
</script>

<style lang="less">
.nav {
    display: flex;
    max-width: 1140px;
    margin: 0 auto;
    flex-direction: row;
    padding-top: 20px;
    font-size: 22px;
    color: #777;
    height: 50px;
    line-height: 50px;
    .logo {
        width: 60px;
        height: 50px;
        background-image: url(../assets/logo.png);
    }
    .menu {
        display: flex;
        flex-direction: row;
        flex: 1;
        margin-left: 50px;
        .menu-item {
            margin-right: 30px;
            &:hover {
                cursor: pointer;
                color: darken(#fff, 25%);
            }
            &.active {
                color: #fff;
            }
        }
    }
    .iconfont {
        font-size: 22px;
        margin-right: 5px;
    }
    .sign-in {
        width: 200px;
        .sign-item {
            margin-left: 10px;
            &.hover:hover {
                cursor: pointer;
                color: darken(#fff, 25%);
            }
        }
    }
}
</style>
